<mat-card class="form-card">
  @if (isLoading()) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  }

  @if (group()?.group) {
    <mat-card-title>
      {{ 'Manage members of {name} group' | translate: { name: group()?.group || '' } }}
      @if (requiredRoles.length && !(hasRequiredRoles | async)) {
        <ix-readonly-badge></ix-readonly-badge>
      }
    </mat-card-title>
  }

  <mat-card-content>
    @if (users().length) {
      <ix-dual-listbox
        class="padding-16"
        display="username"
        key="id"
        height="55vh"
        [listItemIcon]="iconMarker('mdi-account')"
        [sourceName]="'All Users' | translate"
        [targetName]="'Group Members' | translate"
        [source]="users()"
        [(destination)]="selectedMembers"
      ></ix-dual-listbox>
    }
  </mat-card-content>

  <mat-card-actions>
    <button
      *ixRequiresRoles="requiredRoles"
      mat-button
      color="primary"
      ixTest="save"
      [disabled]="isLoading()"
      (click)="onSubmit()"
    >
      {{ 'Save' | translate }}
    </button>
    <button mat-button ixTest="cancel" (click)="onCancel()">{{ 'Cancel' | translate }}</button>
  </mat-card-actions>
</mat-card>
